<template>
  <div style="padding: 20px;">
    <el-card shadow="hover" style="background-color: #dddddd">
      <template #header>
        <div style="font-weight: bold; font-size: 16px;">查看器械 & 修改器械状态</div>
      </template>
      <el-card>
        <template #header>
          <div style="font-size: 14px;">修改器械状态</div>
        </template>
        <!-- 修改器械表单 -->
        <el-form :model="form" label-width="120px" :rules="rules" ref="equipmentForm" style="margin-bottom: 20px;">
          <el-form-item label="器械ID" prop="seid">
            <el-input v-model.number="form.seid" type="number" placeholder="请输入器械ID" />
          </el-form-item>

          <el-form-item label="状态值" prop="condition">
            <el-select v-model="form.condition" placeholder="请选择状态">
              <el-option label="正常" :value="1" />
              <el-option label="损坏" :value="0" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">提交修改</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card style="margin-top: 30px">
        <template #header>
          <div style="font-size: 14px;">查询器械</div>
        </template>
        <!-- 查询区域 -->
        <el-form inline style="margin-bottom: 20px;">
          <el-form-item label="器械ID">
            <el-input v-model.number="query.seid" placeholder="输入器械ID搜索" clearable @keyup.enter="fetchData" />
          </el-form-item>
          <el-form-item label="器械名称">
            <el-input v-model="query.sname" placeholder="输入名称搜索" clearable @keyup.enter="fetchData" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
            <el-button @click="clearQuery">清空</el-button>
          </el-form-item>
        </el-form>

        <!-- 器械表格 -->
        <el-table :data="equipmentList" border style="width: 100%" v-loading="loading">
          <el-table-column prop="seid" label="器械ID" width="200" />
          <el-table-column prop="sname" label="器械名称" width="240" />
          <el-table-column prop="condition" label="状态" width="150">
            <template #default="{ row }">
              {{ row.condition === 1 ? '正常' : '损坏' }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="updateTime" label="最后修改时间" />
        </el-table>

        <!-- 分页器 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

// 表单数据
const form = ref({
  seid: null,
  condition: null
});

const rules = ref({
  seid: [
    { required: true, message: '请输入器械ID', trigger: 'blur' },
    { type: 'number', message: '器械ID必须为数字', trigger: 'change' }
  ],
  condition: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
});

const equipmentForm = ref(null);

// 查询数据
const equipmentList = ref([]);
const loading = ref(false);
const total = ref(0);

const query = ref({
  seid: null,
  sname: '',
  pageNum: 1,
  pageSize: 5
});

// 提交表单
const submitForm = async () => {
  try {
    await equipmentForm.value.validate();

    const res = await request.put('/v1/staff/equipment/update', form.value);
    if (res.state === 2001) {
      ElMessage.success('状态更新成功');
      resetForm();
      fetchData();
    } else {
      ElMessage.error(res.message || '更新失败');
    }
  } catch (error) {
    if (error.name !== 'ValidateError') {
      ElMessage.error('请求出错');
      console.error(error);
    }
  }
};

// 清除查询条件
const clearQuery = () => {
  query.value.seid = null;
  query.value.sname = '';
  fetchData();
};

// 获取数据
const fetchData = async () => {
  try {
    loading.value = true;
    const res = await request.get('/v1/staff/equipment/all', {
      params: query.value
    });
    if (res.state === 2001) {
      equipmentList.value = res.data.equipmentList || [];
      total.value = res.data.total;
    }
  } catch (error) {
    console.error('请求失败:', error);
  } finally {
    loading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  equipmentForm.value.resetFields();
};

// 分页相关方法
const handleSizeChange = (val) => {
  query.value.pageSize = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  query.value.pageNum = val;
  fetchData();
};

onMounted(fetchData);
</script>
